<template>
  <div class='videoPlay'>
    <!-- 视频项 -->
    <div class="video-item">
      <a href="#">
        <!-- 顶部的视频展示部分 -->
        <div class="videoplayer">
          <!-- 视频标签,poster是未播放的时候的背景图,控制条根据页面进行控制是否显示 列表页隐藏，详情页展示-->
          <!-- 设置ref,控制视频的播放和暂停 -->
          <video
            :src="movielist.videosrc"
            :poster="movielist.bgImg"
            :controls="!isShow"
            ref="videoRef"
          >
          </video>
          <!-- 影片的顶部标题介绍  根据页面进行控制是否显示 列表页隐藏，详情页展示-->
          <div
            class="video-title"
            v-show="isShow"
          >{{movielist.filmtitle}}</div>

          <!-- 设置按钮插槽，不同页面的按钮图片不一样 -->
          <div class="btn">
            <slot name="btn"></slot>
          </div>
          <!-- 影片的时长 根据页面进行控制是否显示 列表页隐藏，详情页展示-->
          <div
            class="info-bar"
            v-show="isShow"
          >
            <div class="time">{{movielist.alltime}}</div>
          </div>
        </div>
      </a>

      <!-- 影片的底部标题  根据页面进行控制是否显示 列表页隐藏，详情页展示-->
      <div
        class="info-title"
        v-show="!isShow"
      >{{movielist.filmtitle}}</div>

      <!-- 影片发布的相关信息 -->
      <div class="video-info">
        <!-- 影片上传者的相关信息 -->
        <div class="video-info-left">
          <!-- 上传者头像 -->
          <img
            class="user-avatar"
            :src="movielist.upimg"
          >
          <!-- 上传者的用户名 -->
          <div class="user-nickname">{{movielist.upname}}</div>
          <!-- 这里根据数据判断有没有大v符号 ？？？？？？？？？？？？？ -->
          <!-- 大V图标 -->
          <img
            class="c-icon"
            src="//p0.meituan.net/moviemachine/5aaa710d72c78d6553be83f43bc9e4f3946.png"
            alt=""
            v-show="!isShow&&movielist.isv==1"
          >
        </div>

        <!-- 关于影片的信息  根据页面进行控制是否显示 列表页隐藏，详情页展示-->
        <div
          class="video-info-right"
          v-if="isShow"
        >
          <!-- 点赞加类名，换背景图，数字加1 ??????????????-->
          <!-- 点赞的图标（背景图插入）点赞数 -->
          <div class="video-praise ">{{movielist.likes}}</div>
          <!-- 评论的图标（背景图插入）评论数 -->
          <a class="link">
            <div class="video-comment">{{movielist.comment}}</div>
          </a>

          <!-- <van-cell
              class="video-share"
              @click.stop.prevent="showShare = true"
            ></van-cell>
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select.stop.prevent="onSelect"
            /> -->

          <van-cell
            class="video-share"
            @click.prevent="showShare = true"
          />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </div>
      </div>

    </div>
    <!-- 视频标签显示与否通过State播放状态来控制 -->
  </div>

</template>
<script>
// 引入弹框
import { Toast } from 'vant'
export default {
  // 接收父组件传递过来的参数，isShow判断是哪个界面，state判断播放状态
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    state: {
      type: Boolean,
      default: false
    },
    movielist: {
      type: Object
    }
  },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
    // return {
    //   showShare: false,
    //   options: [
    //     { name: '微信', icon: 'wechat' },
    //     { name: '微博', icon: 'weibo' },
    //     { name: '复制链接', icon: 'link' },
    //     { name: '分享海报', icon: 'poster' },
    //     { name: '二维码', icon: 'qrcode' }
    //   ]
    // }
  },
  updated() {
    // console.log('子组件' + this.state)
    // console.dir(this.$refs.videoRef)
    // console.log(this.state)
    // 根据更新的生命周期，切换播放状态，这是引用传值
    if (this.state) {
      // console.log('112132')
      this.$refs.videoRef.play()
    } else {
      this.$refs.videoRef.pause()
    }
  },
  methods: {

    // 这是按钮没有抽出去之前写的 子传父
    // goToSeeDetail() {
    //   // this.$emit('clickTo', '我是子')
    //   console.log(1)
    //   this.$parent.goToSeeDetail('hahaha')
    // },
    // goToPlay() {
    //   this.$emit('clickToPlay', '3d3d3d3d')
    // },

    onSelect(option) {
      // 这是个事件，没有所谓的默认行为
      // console.log('你点了分享')
      Toast(option.name)
      // 点击之后就将分享框进行隐藏
      this.showShare = false
    }
  }
}
</script>
<style lang="scss" scoped>
.videoPlay {
  .video-item {
    // 每个视频项之间有一定的间隙
    margin-bottom: 6px;
    // 需要加上这一层的定位，不然跑上面去了
    position: relative;
    // 设置溢出隐藏 具体高度
    .videoplayer {
      position: relative;
      height: 210px;
      overflow: hidden;
      background-color: #000;
      // 视频标签刚好嵌入
      video {
        width: 100%;
        height: 100%;
        background-color: #000;
      }
      // 用海报覆盖原来的视频
      .poster {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      // 视频标题要放在最上面 设置字体大小和颜色 行高以及外边距
      // 文字溢出变成省略号 文字换行
      .video-title {
        position: absolute;
        top: 0;
        left: 0;
        font-family: PingFangSC-Medium, serif;
        font-size: 17px;
        color: #fff;
        letter-spacing: 0;
        line-height: 24px;
        z-index: 1;
        margin: 9px 15px 19px;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
      // .play-but {
      //   z-index: 10;
      //   position: absolute;
      //   left: 50%;
      //   top: 50%;
      //   width: 54px;
      //   height: 54px;
      //   margin-left: -27px;
      //   margin-top: -27px;
      //   background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
      //   background-size: contain;
      // }
      // .play-butt {
      //   z-index: 10;
      //   position: absolute;
      //   left: 50%;
      //   top: 50%;
      //   width: 42px;
      //   height: 42px;
      //   margin-left: -21px;
      //   margin-top: -21px;
      //   // background-image: url(http://p1.meituan.net/moviemachine/0bde92ac8061da52eee903fdafc483da6378.png);
      //   background-image: url(http://p1.meituan.net/moviemachine/0bde92ac8061da52eee903fdafc483da6378.png);
      //   background-size: contain;
      // }
      // 播放时长 底部居右 设置高度行高 字体大小和颜色以及内边距
      .info-bar {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 30px;
        line-height: 30px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
        color: #fff;
        font-size: 12px;
        text-align: right;
        padding-right: 10px;
      }
    }
    // 字体大小颜色和内边距
    .info-title {
      font-size: 15px;
      background: #fff;
      padding: 15px 15px 12px;
      color: #333;
    }
    // 影片信息设置移动布局，两边对齐 加上一部分左内边距，高度，背景颜色
    .video-info {
      height: 46px;
      background-color: #fff;
      padding-left: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 左边自己设置移动布局，图像和用户名可以放在一排
      .video-info-left {
        display: flex;
        font-size: 13px;
        // 涉及到图片就要设置宽高，半径设成一半刚好是一个圆形
        .user-avatar {
          width: 22px;
          height: 22px;
          border-radius: 11px;
        }
        .user-nickname {
          margin-left: 8px;
          font-size: 14px;
          color: #666;
        }
        .c-icon {
          width: 12px;
          height: 12px;
          margin-left: 6px;
        }
      }
      // 三个元素水平排放
      .video-info-right {
        display: flex;
        .video-praise,
        .video-comment,
        .video-share {
          background-size: 18px 18px !important;
          padding-left: 23px;
          padding-right: 5px;
          height: 35px;
          line-height: 35px;
          font-size: 12px;
        }
        .video-praise {
          background: url(http://s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-praise.png)
            no-repeat 0;
          // 设置背景图大小
          // 把图片和文字挤开
          margin-right: 26.5px;
        }
        .video-comment {
          background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-comment.png)
            no-repeat 0;
          color: #666;
          margin-right: 12px;
        }
        .video-share {
          background: url(http://s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-share.png)
            no-repeat 50%;
          width: 18px;
          padding-left: 7.5px;
          padding-right: 7.5px;
          margin-right: 7.5px;
        }
      }
    }
  }
}
</style>
